<template>
	<view>
		<u-navbar bgColor="#c1282d" leftIconColor="#ffffff" :titleStyle="{color:'#ffffff'}" title="合同签署" placeholder
			autoBack>
			<view class="flexright xiaobai" slot="right" @click="submit">保存</view>
		</u-navbar>
		<view class="flexcenter mainpadding ffffff" @click="messageTime.timeShow=true">
			<view class="xiaohei titletext bold margin-right">{{start_time || "起始时间"}}</view>
			<view class="xiaohei titletext bold margin-right">—</view>
			<view class="xiaohei titletext bold">{{end_time || "结束时间"}}</view>
		</view>
		<view class="currentimgbox" v-for="(item,index) in htInfo.qsdata_text" :key="index">
			<image :src="item.imageurl" mode="widthFix" style="width: 100%;"></image>
			<!-- 内容 -->
			<template>
				<view class="" v-for="(current,currentindex) in item.mbdata" :key="currentindex">
					<!-- 输入框 -->
					<view :class="current.content==''?'xiaohong':'xiaolv'" v-if="current.type==1"
						style="position: absolute;z-index: 5;"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}"
						@click="enterinput(index,currentindex,current.name)">
						{{current.content==''?current.name:current.content}}
					</view>
					<!-- 签章图片 -->
					<view class="" v-if="current.type==10" style="position: absolute;z-index: 5;"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}">
						<image :src="current.content"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}" mode=""></image>
					</view>
					<!-- 签署区 -->
					<view class="" v-if="current.type==11" style="position: absolute;z-index: 5;"
						@click="enterqm(index,currentindex,current.name)"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}">
						<text class="xiaohong" v-if="current.content==''">{{current.name}}</text>
						<image :src="current.content"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content!=''" mode=""></image>
					</view>
					<!-- 身份证正面面 -->
					<view class="" v-if="current.type==12" style="position: absolute;z-index: 5;"
						@click="enterzp(index,currentindex,current.name)"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}">
						<image src="@/static/sfzzm.png"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content==''" mode=""></image>
						<image :src="current.content"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content!=''" mode=""></image>
					</view>
					<!-- 身份证反面 -->
					<view class="" v-if="current.type==13" style="position: absolute;z-index: 5;"
						@click="enterzp(index,currentindex,current.name)"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}">
						<image src="@/static/sfzfm.png"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content==''" mode=""></image>
						<image :src="current.content"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content!=''" mode=""></image>
					</view>
					<!-- 半身照 -->
					<view class="" v-if="current.type==14" style="position: absolute;z-index: 5;"
						@click="enterzp(index,currentindex,current.name)"
						:style="{'top':current.y*scalenum+'px','left':current.x*scalenum+'px'}">
						<image src="@/static/bsz.png"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content==''" mode=""></image>
						<image :src="current.content"
							:style="{width:current.w*scalenum+'px',height:current.h*scalenum+'px',}"
							v-if="current.content!=''" mode=""></image>
					</view>
				</view>
			</template>
		</view>
		<u-modal :show="show" :title="modaltitle" showCancelButton confirmColor="#c1282d" @cancel="entercancel"
			@confirm="enterconfirm">
			<view class="slot-content" style="width: 100%;">
				<textarea v-model="entercontent" placeholder="请输入" style="width: 100%;height: 150rpx;"></textarea>
			</view>
		</u-modal>
		<u-popup :show="qmShow" closeable @close="qmShow=false" round="10">
			<view class="mainpadding ffffff radius">
				<view class="xiaohui" style="font-size: 22rpx;">请仔细阅读，签字后代表本人确认无误并同意上述内容</view>
				<view style="font-size: 24rpx;color: #333;" class="margin_top2">请签字：</view>
				<view class="sign">
					<csr-sign @finish="finish" ref="csrsign" orientation="portrait" height="300"
						strokeStyle="#333"></csr-sign>
				</view>
				<view class="flexbetween">
					<view class="xiaohong" style="font-size: 22rpx;">注：签字完成后请点击完成签名！</view>
					<view class="xiaohui" style="font-size: 22rpx;">{{datetime}}</view>
				</view>
			</view>
		</u-popup>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm" @timecancel="timecancel"></timePicker>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	//插件对象
	var Screen = uni.requireNativePlugin('Yam-Screen');
	export default {
		data() {
			return {
				// 使用方法
				modal: {
					modalShow: false,
					title: "",
				},
				htInfo: {},
				windowWidth: 0,
				scalenum: 0,
				show: false,
				parentindex: 0,
				childindex: 0,
				entercontent: "",
				modaltitle: "",
				qmShow: false,
				datetime: "",
				listid: "",
				messageTime: {
					mode: "date",
					timeShow: false,
					title: "请选择开始时间",
					minDate: 0
				},
				start_time: "",
				end_time: "",
			}
		},
		onLoad(options) {
			uni.$on("changeImg", data => {
				this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content = data.image_text
				this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content1 = data.image
			})
			//开启防录屏截屏
			// #ifdef APP-PLUS
			Screen.openAntiRecordScreen();
			// #endif
			// this.listid = 10
			this.listid = options.id
			this.datetime = httpRequest.timereturn(new Date())
			this.getDetail()
			//  进入页面的时候执行一次
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.windowWidth = res.windowWidth; // 窗口宽度
					that.scalenum = Number(res.windowWidth / 1100).toFixed(5)
					console.log(that.windowWidth);
					console.log(that.scalenum);
				}
			});
		},
		onUnload() {
			uni.$off("changeImg")
			//关闭防录屏截屏
			Screen.closeAntiRecordScreen();
		},
		methods: {
			timeConfirm(e) {
				if (this.messageTime.title == "请选择开始时间") {
					this.start_time = e
					setTimeout(() => {
						this.messageTime.title = "请选择结束时间"
						this.messageTime.minDate = Number(new Date(e))
						this.messageTime.timeShow = true
					}, 100)
				} else {
					this.messageTime.title = "请选择开始时间"
					this.messageTime.minDate = 0
					this.end_time = e
				}
			},
			timecancel() {
				this.messageTime.title = "请选择开始时间"
				this.messageTime.minDate = 0
				this.messageTime.timeShow = false
			},
			enterzp(parentindex, childindex, modaltitle) {
				this.modal.title = modaltitle
				this.parentindex = parentindex
				this.childindex = childindex
				this.modal.modalShow = true
			},
			modalSure() {
				let _this = this
				this.modalcancel()
				let type = this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].type
				if (type == 12 || type == 13) { //身份证正反
					uni.showActionSheet({
						itemList: ['相机', '相册'],
						success: function(res) {
							// 选择相机走0
							if (res.tapIndex == 0) {
								httpRequest.chooseImage(1, ['camera']).then(res => {
									for (var i = 0; i < res.length; i++) {
										_this.gocaijian(res[i])
									}
								}).catch(err => {
									console.log(err);
								});
							}
							// 选择相册走1
							if (res.tapIndex == 1) {
								httpRequest.chooseImage(1, ['album']).then(res => {
									for (var i = 0; i < res.length; i++) {
										_this.gocaijian(res[i])
									}
								}).catch(err => {
									console.log(err);
								});
							}
						},
						fail: function(res) {}
					});
				}
				if (type == 14) { //半身照
					httpRequest.chooseImage(1, ['camera']).then(res => {
						for (var i = 0; i < res.length; i++) {
							_this.uploadImageService(res[i])
						}
					}).catch(err => {
						console.log(err);
					});
					// uni.navigateTo({
					// 	url:"/pages/tab4/hetong/renxiang"
					// })
				}
			},
			gocaijian(src) {
				let data = {
					src: src,
					width: 1365,
					height: 900,
					type: 3,
				}
				uni.navigateTo({
					url: "/pages/tab4/hetong/caijiantp?msg=" + encodeURIComponent(JSON
						.stringify(data))
				})
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content = res.fullurl
					this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content1 = res.url
				}).catch(err => {});
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			submit() {
				if (this.start_time == "") {
					httpRequest.toast("请选择起始时间")
					return false
				}
				if (this.end_time == "") {
					httpRequest.toast("请选择结束时间")
					return false
				}
				if (Number(new Date(this.start_time)) > Number(new Date(this.end_time))) {
					httpRequest.toast("起始时间不能大于结束时间")
					return false
				}
				httpRequest.request('/api/user/signContract', 'POST', {
					id: this.listid,
					start_time: this.start_time,
					end_time: this.end_time,
					qsdata: this.htInfo.qsdata_text,
					qsdata1: this.htInfo.qsdata1_text
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			enterinput(parentindex, childindex, modaltitle) {
				this.modaltitle = modaltitle
				this.parentindex = parentindex
				this.childindex = childindex
				this.entercontent = this.htInfo.qsdata_text[parentindex].mbdata[childindex].content
				this.show = true
			},
			enterqm(parentindex, childindex) {
				this.parentindex = parentindex
				this.childindex = childindex
				this.qmShow = true
			},
			finish(e) {
				let _this = this;
				this.qmShow = false
				httpRequest.uploadFile('/api/common/upload', e).then(res => {
					this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content = res.fullurl
					this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content1 = res.url
				})
			},
			enterconfirm() {
				if (this.entercontent == "") {
					httpRequest.toast("请输入内容")
					return false
				}
				this.htInfo.qsdata_text[this.parentindex].mbdata[this.childindex].content = this.entercontent
				this.parentindex = ""
				this.childindex = ""
				this.entercontent = ""
				this.show = false
			},
			entercancel() {
				this.show = false
				this.parentindex = ""
				this.childindex = ""
				this.entercontent = ""

			},
			getDetail() {
				httpRequest.request('/api/user/htDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.htInfo = res.data
				})
			},
		},
	} //export default
</script>
<style lang="scss" scoped>
	.currentimgbox {
		position: relative;
	}
</style>